<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="uft-8">
  	<title>1-4 无缝滚动</title>
  	<style type="text/css">
  		*{
  			margin: 0;
  			padding: 0;
  		}
  		a{
  			background-color: rgba(0,0,0,0.6);
  			border-radius: 100%;
  			font-size: 30px;
  			text-decoration: none;
  			color: white;
  			position: relative;
  		}
  		.left{
			position: absolute;
			left: 330px;
			top: 135px;
  		}
  		.right{
  			position: absolute;
  			left: 1010px;
  			top: 135px;
  		}
  		div{
  			width:620px;
  			height: 100px;
  			margin: 100px auto;
  			position: relative;
  			overflow: hidden;
  		}
  		div ul{
  			width: 1280px;
  			position: absolute;
  			left: 0;
  			top: 0;
  		}
  		div ul li{
  			list-style: none;
  			float: left;
  		}
  		div ul li:hover img{
  			transform: scale(1.5,2);
  		}
  		div ul li img{
  			width: 150px;
  			margin-left: 5px;
  		}	
  	</style>
</head>
<body>
	<a href="javascript:;" class="left">&lt;</a>
	<a href="javascript:;" class="right">&gt;</a>
	<div id="div1">
		<ul>
			<li><img src="1.jpg"></li>
			<li><img src="2.jpg"></li>
			<li><img src="3.jpg"></li>
			<li><img src="4.jpg"></li>
			<li><img src="1.jpg"></li>
			<li><img src="2.jpg"></li>
			<li><img src="3.jpg"></li>
			<li><img src="4.jpg"></li>
		</ul>
	</div>
	<script type="text/javascript">
		var hezi=document.getElementById('div1'),
			tupian=hezi.getElementsByTagName('ul')[0],
			anniu=document.querySelectorAll('a'),
			speed=-2;
		function move(){
			if(tupian.offsetLeft<-tupian.offsetWidth/2){
				tupian.style.left='0';
			};
			if(tupian.offsetLeft>0){
				tupian.style.left='-620px';
			}
			tupian.style.left=tupian.offsetLeft+speed+'px';
		}
		var timer=setInterval(move,30);
		hezi.onmouseover=function(){
			clearInterval(timer);
		};
		hezi.onmouseout=function(){
			timer=setInterval(move,30);
		};
		anniu[0].onclick=function(){
			speed=-2;
		}
		anniu[1].onclick=function(){
			speed=2;
		}
  	</script>
</body>
</html>